<template>
  <div>
    <div>&nbsp;</div>
    <div
      style="
        display: flex;
        justify-content: space-between;
        background-color: #ffffff;
      "
    >
      <h1>我的兄弟&emsp;</h1>
      <el-button type="primary" @click="addOrUpdate()">新增</el-button>
    </div>
    <div>&nbsp;</div>

    <!-- 查询框 -->
    <el-form
      :inline="true"
      :model="queryForm"
      ref="queryForm"
      class="demo-queryForm broSerach"
      label-position="right"
      label-width="80px"
    >
      <el-form-item label="姓名" prop="name">
        <el-input
          v-model="queryForm.name"
          autocomplete="off"
          placeholder="请输入姓名"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-col :span="8">
          <el-input-number
            v-model="queryForm.age"
            placeholder="请输入年龄(岁)"
            onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
            :min="0"
            :max="120"
          >
          </el-input-number>
        </el-col>
      </el-form-item>

      <el-form-item label="性别" prop="sex" required>
        <el-select v-model="queryForm.sex" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="家乡" prop="hometown">
        <el-input
          v-model="queryForm.hometown"
          autocomplete="off"
          placeholder="请输入家乡"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="爱好" prop="hobby">
        <el-input
          v-model="queryForm.hobby"
          autocomplete="off"
          placeholder="请输入爱好"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getaaa()">立即查询</el-button>
        <el-button @click="resetForm('queryForm')">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- table页 -->
    <el-table :data="dataList">
      <el-table-column
        prop="id"
        label="ID"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="sex"
        label="性别"
        align="center"
        show-overflow-tooltip
        :formatter="sexFormatter"
      ></el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="hometown"
        label="家乡"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="hobby"
        label="爱好"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            type="default"
            icon="el-icon-edit"
            @click="addOrUpdate(scope.row.id)"
            >修改</el-button
          >
          <el-button
            type="default"
            icon="el-icon-delete"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页开启 -->
    <div class="page-container">
      <el-pagination
        :current-page="current"
        :page-sizes="[10, 3, 20, 100]"
        :page-size="size"
        :total="totalCount"
        background
        layout="total, prev, pager, next,sizes,jumper"
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
      >
      </el-pagination>
    </div>
    <bro-form
      v-if="broFormVisible"
      ref="broForm"
      @refreshDataList="refreshDataList"
    ></bro-form>
  </div>
</template>
<script>
import { getList, delBro, queryList,queryListQx,seachBro } from "@/api/bro";
//传入弹窗文件
import broForm from "./editBro";
import { $gc } from "gc-starter-ui-plus";
import axios from "axios";
import qs from "qs";

export default {
  name: "bro",
  components: { broForm },
  mixins: [$gc.mixins.pageMixins],
  data() {
    return {
      options: [
        {
          value: 1,
          label: "男",
        },
        {
          value: 0,
          label: "女",
        },
      ],
      dataListLoading: false,
      loadingText: "",
      broFormVisible: false,
      // 表单查询
      queryForm: {
        id: undefined,
        sex: undefined,
        name: "",
        age: 0,
        hometown: "",
        hobby: "",
        searchKey: "",
      },
      // 表格数据
      dataList: [],
    };
  },
  mounted() {
    // this.size = 10;
    this.getaaa();
    this.getDataList();
  },
  methods: {
    //查询方法
    getaaa() {
      let _this = this;
      axios
        .post(
          "http://localhost:8081/tgyfirst/bro/getBroList.do",
          qs.stringify({
            sex: this.queryForm.sex,
            name:this.queryForm.name,
            hometown:this.queryForm.hometown,
            age:this.queryForm.age,
            hobby:this.queryForm.hobby,
            token:
              "eyJhbGciOiJIUzI1NiJ9.eyJ1bmFtZSI6ImFkbWluIiwicm5hbWUiOiLnrqHnkIblkZgiLCJpc3MiOiJnYyIsIm9pZCI6IjEiLCJ0aWQiOiIyIiwiZHBUeXBlIjo1LCJ1aWQiOiIyIiwiYXVkIjoiMiIsInRtIjp0cnVlLCJpZCI6IjE0MzQ3NTUzMTgwMzQ5MjM1MjEiLCJleHAiOjE2MzA5MTQ0OTgsImlhdCI6MTYzMDkwNzI5OCwianRpIjoiMTQzNDc1NTMxODAzNDkyMzUyMSJ9.4i0mU-oZWKDZYtz-FSJpo7m_AyWZ6O1jR4eT2FwqxQ0",
          })
        )
        .then(function (response) {
          _this.dataList = response.data.data;
          _this.totalCount = response.totalCount;
          console.log(_this.dataList);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //查询事件
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          queryBroList();
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    sexFormatter(row, column) {
      if (row.sex == 1) {
        return "男";
      } else if (row.sex == 0) {
        return "女";
      }
    },
    // 查询事件
    handleSearch() {
      // 一定要加上这个，否则会出现查询不到结果的情况
      this.current = 1;
      this.getDataList();
    },
    getDataList() {
      this.dataListLoading = true;
      this.loadingText = "正在查询数据...";
      getList({
        current: this.current,
        size: this.size,
        name: this.queryForm.name || "",
      })
        .then((data) => {
          this.dataListLoading = false;
          this.dataList = data.list;
          this.totalCount = data.totalCount;
          console.log(data);
        })
        .catch((e) => {
          this.dataListLoading = false;
        });
    },
    // 刷新
    refreshDataList() {
      this.queryForm.name = "";
      this.handleSearch();
    },
    // 新增或修改
    addOrUpdate(id) {
      this.broFormVisible = true;
      this.$nextTick(() => {
        this.$refs["broForm"].init(id);
      });
    },
    // 删除事件和方法
    handleDelete(id) {
      this.$confirm(`确定进行删除操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delBro(id)
            .then((data) => {
              this.$message.success("删除成功");
              this.getDataList();
            })
            .catch((e) => {
              this.$message.success(e.msg);
            });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="css">
.broSerach .el-input-number {
  width: 300px;
  line-height: 30px;
  height: 28px;
}
.broSerach .el-input__inner {
  width: 300px;
}
.broSerach .el-form-item__content {
  margin-left: 40px;
}
</style>
